<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item>基础设置</el-breadcrumb-item>
      </el-breadcrumb>

      <el-tabs v-model="activeName">
        
        <el-tab-pane label="比例设置" name="first">
          <el-form :model="form" :rules="rules" ref="updateRule" label-width="120px">
            <el-form-item label="一级返利比例" prop="levelOnePercentage">
              <el-input v-model="form.levelOnePercentage" type="number" style="width: 200px;"
                placeholder="请设置一级返利比例"></el-input>
            </el-form-item>
            <el-form-item label="二级返利比例" prop="levelTwoPercentage">
              <el-input v-model="form.levelTwoPercentage" type="number" style="width: 200px;"
                placeholder="请设置二级返利比例"></el-input>
            </el-form-item>
          </el-form>
          <el-button @click="addHandle">提交</el-button>
        </el-tab-pane>

        <el-tab-pane label="积分清空时间" name="scend">
          <div class="timeSelect">
            <span>积分统一清空时间： </span>
            <el-date-picker v-model="clearTime" value-format="yyyy-MM-dd" type="date" placeholder="请设置积分统一清空日期">
            </el-date-picker>
          </div>
          <el-button @click="timeHandle">提交</el-button>
        </el-tab-pane>


      </el-tabs>



    </el-card>
  </div>
</template>

<script>
import { editSetting, listSetting } from "network/url";

export default {
  data() {
    return {

      activeName: 'first',
      form: {
        settingId: '',
        levelOnePercentage: '',
        levelTwoPercentage: '',
        time: "",
      },


      rules: {
        levelOnePercentage: [
          {
            required: true,
            message: "请设置一级返利比例",
            trigger: "blur",
          },
        ],
        levelTwoPercentage: [
          {
            required: true,
            message: "请设置二级返利比例",
            trigger: "blur",
          },
        ],
      },


      clearTime: ''
    };
  },
  comments: {},
  methods: {
    timeHandle() {
      if (this.clearTime == '') {
        this.$message.warning('请设置积分统一清空日期')
        return
      }
      console.log(this.clearTime);

    },
    addHandle() {
      this.$refs.updateRule.validate((valid) => {
        if (valid) {
          console.log(this.form);
          editSetting({
            settingId: this.form.settingId,
            levelOnePercentage: this.form.levelOnePercentage,
            levelTwoPercentage: this.form.levelTwoPercentage,
          })
            .then((res) => {
              if (res.flag) {
                this.$message({
                  type: "success",
                  message: "保存成功",
                });
                this.getList();
              } else {
                this.$message({
                  message: "保存失败!",
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return console.log("update Err");
        }
      });
    },

    getList() {
      listSetting().then(res => {
        if (res.flag) {
          this.form = res.data
        }
      })
    },

  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.timeSelect {
  margin: 15px 0;
  font-size: 14px;
  color: #606266;
}

.box-card {
  height: 86vh;

}
</style>
